<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <person 
        :name="name" 
        :age="age" 
        :is-married="isMarried"
        :skills="skills"
        :rating="rating"
        ></person>
    </div>
    <script src="vue.js"></script>
    <script>
        var vm = new Vue({
            el:'#app',
            data:{
                name:'张三',
                //Invalid prop: type check failed for prop "age". Expected Number with value 1, got String with value "1".
                age:18,
                isMarried:true,
                skills:["Vue","React"],
                rating:'good'//评级只能是good  average poor
            },
            components:{
                'person':{
                    props:{
                        name:{
                            type:String, //类型
                            required:true//必须要提供此属性
                        },
                        age:{
                            type:Number,
                            required:true
                        },
                        isMarried:{
                            type:Boolean,
                            default:false
                        },
                        skills:{
                            type:Array,
                            default:function(){
                                return ["Vue","React"];
                            }
                        },
                        //评分
                        rating:{
                            required:true,
                            //编写一个自定义的校验函数
                            //Invalid prop: custom validator check failed for prop "rating".
                            validator:function(value){
                                //如果传递的值是三个字符串中有的一个的话，就返回true,表示校验 通过
                                //如果返回-1不通过
                                return ['good','average','poor'].indexOf(value)!==-1
                            }
                        }
                    },
                    template:`
                    <div>
                        <p>姓名:{{name}}</p>
                        <p>年龄:{{age}}</p>
                        <p>婚否:{{isMarried?'是':'否'}}</p>
                        <p>技能:{{skills.join(',')}}</p>
                        <p>评级:{{rating}}</p>
                    </div>
                    `
                }
            }
        });
    </script>
</body>
</html>